<template>
    <view class="upimgs">
        <view class="tit" v-if="showTitle"><text v-if="required" class="col-red">*</text>{{ title }}</view>
        <view class="ups">
            <view v-if="max > 1">
                <view class="show-imgs" v-for="(item, index) in list" :key="index">
                    <!-- <image src="/static/s.png" mode="widthFix" class="btn-close" @tap="closeImg(index)" v-if="!disabled"></image> -->
                    <view  class="btn-close" @tap="closeImg(index)" v-if="!disabled">
                         <icon type="clear" size="20" color="#f00"/>
                    </view>
                    <image :src="item" class="imgs" mode="aspectFill" :style="{
                    width:size+'rpx',
                    height:size+'rpx',
                }"></image>
                    <view class="txt" v-if="mainImg">
                        <text class="default" v-if="img == index">封面</text>
                        <text class="btn" v-else @tap="setMainImg(index)">设为封面</text>
                    </view>
                </view>

                <view @tap="up" style="display: inline-block;vertical-align: top;">
                    <slot name="upicon">
                       <!-- <view class="btn-up" :style="[{
                    	backgroundColor: bgcolor,
                        width:size+'rpx',
                        height:size+'rpx',
                        lineHeight:size+'rpx',
                    }]"></view> -->
                        <image src="/static/icon_up.png" mode="widthFix" :style="[{
                        width:size+'rpx',
                        height:size+'rpx',
                    }]" class="icon-up"></image>
                    
                    </slot>
                </view>
            </view>

            <view style="display: inline-block;" v-else @tap="up">
                <image :src="list[0]" v-if="list.length" class="imgs" mode="aspectFill" :style="{
                    width:size+'rpx',
                    height:size+'rpx',
                }"></image>
                <slot name="upicon" v-else>
                   <!-- <view class="btn-up" :style="[{
					backgroundColor: bgcolor,
                    width:size+'rpx',
                    height:size+'rpx',
                    lineHeight:size+'rpx',
				}]"></view> -->
                    <image src="/static/icon_up.png" mode="widthFix" :style="[{
                    width:size+'rpx',
                    height:size+'rpx',
				}]" class="icon-up"></image>
                
                </slot>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
    data() {
        return {};
    },
    props: {
		showTitle:{
            type: Boolean,
            default: true
        },
        title: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: []
        },
        max: {
            type: [String, Number],
            default: 9
        },
        mainImg: {
            type: Boolean,
            default: false
        },
        img: {
            type: [String, Number],
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        },
		bgcolor: {
		    type: String,
		    default: '#fff'
		},
        size:{
            type: [String, Number],
            default: 200
        },
        required: {
            type: Boolean,
            default: false
        },
        //限制大小
        limit:{
          type: Boolean,
          default: false
        },
        minMB:{
            type: [String, Number],
            default:0,
        },
        maxMB:{
            type: [String, Number],
            default: 3*1024*1024,
        },
        //app图片压缩
        appCompress:{
          type: Boolean,
          default: true
        },
    },
    methods: {
        async up() {
            if(this.disabled)return;
            const that = this;
            let list = that.list;
            let max = list.length;
            let MAX_UPIMG = this.max;

            if (MAX_UPIMG > 1 && max >= MAX_UPIMG) {
                that.$common.showTip(`最多上传${MAX_UPIMG}张照片`);
                return;
            }
            let count = MAX_UPIMG > 1 ? MAX_UPIMG - max : MAX_UPIMG;
            let  sizeType=  ['original', 'compressed'];
            const [err, res] = await uni.chooseImage({
                count, //默认9
                sizeType,
            });
            console.log(res);
            if(res && res.tempFilePaths){
                let temp = res.tempFilePaths;
                console.log('this.minMB',this.minMB)
                if(this.limit){
                  let index =  res.tempFiles.findIndex(item=>{
                      if(item.size > this.maxMB ){
                          let size = this.getfilesize(this.maxMB);
                          this.$common.showTip(`照片超过${size}!`, 'none');
                          return true
                      }
                      if(item.size < this.minMB){
                          let size = this.getfilesize(this.minMB);
                          this.$common.showTip(`照片不能低于${size}!`, 'none');
                          return true
                      }
                  });
                  if(~index)return
                }
                
                //app端图片压缩
                // https://uniapp.dcloud.net.cn/api/media/image?id=compressimage
                //#ifdef APP-PLUS
                if(this.appCompress){
                    for(let i=0,l=temp.length;i<l; i++){
                        console.log('压缩前'+temp[i]);
                        let [cErr,cRes] = await uni.compressImage({
                              src: temp[i],
                              quality: 80,
                        })
                        if(cRes.tempFilePath){
                           console.log('app压缩图片'+cRes.tempFilePath);
                           console.log("cRes: " + JSON.stringify(cRes));
                           temp[i] = cRes.tempFilePath
                        }
                    }
                }
                //#endif
                
                list = MAX_UPIMG > 1 ? [...list, ...temp] : temp;
                this.$emit('upUpdata', list);
             }
        },
        setMainImg(index) {
             if(this.disabled)return;
            // this.img = index;
            this.$emit('setImg', index)
            this.$common.showTip('设置成功', 'success');
        },
        closeImg(index) {
             if(this.disabled)return;
             let img = this.img;
            let list = this.list;
            list.splice(index, 1);
            if (img == index || list.length == 2) {
                img = 0;
            }
            if (img > 0) {
                img = img--;
            }
            this.$emit('setImg', img);
            this.$emit('upUpdata', list);
        },
        getfilesize(size) {
                if (!size)
                    return "";
         
                var num = 1024.00; //byte
         
                if (size < num)
                    return size + "B";
                if (size < Math.pow(num, 2))
                    return (size / num).toFixed(2) + "K"; //kb
                if (size < Math.pow(num, 3))
                    return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
                if (size < Math.pow(num, 4))
                    return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
                return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
            }
    }
};
</script>

<style scoped lang="scss">
.upimgs {
    // padding: 0 0 40rpx;
    .tit {
        font-size: 16px;
    }
}
.ups {
    .show-imgs {
        margin-right: 20upx;
        margin-bottom: 10upx;
        display: inline-block;
        position: relative;
        .btn-close {
            position: absolute;
            right: -20upx;
            top: -20upx;
            width: 40upx;
            height: 40upx;
            z-index: 8;
        }
        .txt {
            text-align: center;
            padding: 2px 0;
        }
        .default,
        .btn {
            color: $color;
            height: 22px;
            line-height: 20px;
            border: 1px solid #fff;
            display: inline-block;
            border-radius: 5px;
            padding: 0 30upx;
            font-size: 12px;
        }
        .btn {
            border-color: $color;
        }
    }
    .imgs {
        width: 200rpx;
        height: 200rpx;
    }
    .upimg {
        display: inline-block;
        vertical-align: top;
        margin-bottom: 10upx;
    }
    .btn-up {
        vertical-align: top;
        display: inline-block;
        width: 200rpx;
        height: 200rpx;
        line-height: 200rpx;
        font-size: 0;
        text-align: center;
        background: $uni-bg-color;
        box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        .icon {
            width: 48rpx;
            height: 48rpx;
            vertical-align: middle;
        }
    }
}

.icon-up{
    width: 200rpx;
    height: 200rpx;
}
</style>
